<template>
  <div class="app-container">
    <el-descriptions :column="2" border>
      <el-descriptions-item>
        <template slot="label">
          合同编号
        </template>
        {{contractInfo.contractCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          合同类型
        </template>
        <dict-tag :options="dict.type.contract_type" :value="contractInfo.contractType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          租赁状态
        </template>
        <dict-tag :options="dict.type.lease_status" :value="contractInfo.leaseStatus"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          租金
        </template>
        {{contractInfo.contractRent}}/年
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          押金
        </template>
        {{ contractInfo.contractCashPledge }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          付款方式
        </template>
        <dict-tag :options="dict.type.pay_type" :value="contractInfo.contractPaymentType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户编号
        </template>
        {{contractInfo.customerCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          承租方
        </template>
        {{contractInfo.contractCustomerName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系人
        </template>
        {{contractInfo.customerLinkman}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          联系电话
        </template>
        {{contractInfo.customerPhone1}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          合同备注
        </template>
        {{contractInfo.remark}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          合同附件
        </template>
        <div v-if="contractInfo.contractUrl">
          <el-link type="primary"> </el-link></div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          租赁时间
        </template>
        {{contractInfo.contractStartDate}} 至 {{contractInfo.contractEndDate}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          签订时间
        </template>
        {{contractInfo.contractSigningDate}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" border style="margin-top: 20px">
      <el-descriptions-item>
        <template slot="label">
          资产编号
        </template>
        {{assetInfo.assetNumMaster}}<span v-if="assetInfo.assetNumAttached">-{{assetInfo.assetNumAttached}}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          资产名称
        </template>
        {{assetInfo.assetName}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          资产地点
        </template>
        {{assetInfo.assetAddressDistrict}}{{assetInfo.assetAddress}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          门牌号
        </template>
        <span v-if="assetInfo.assetDoorNum">{{assetInfo.assetDoorNum}}号</span>
        <span v-if="assetInfo.assetUnitNum">{{assetInfo.assetUnitNum}}单元</span>
        <span v-if="assetInfo.assetRoomNum">{{assetInfo.assetRoomNum}}室</span>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          房屋类型
        </template>
        <dict-tag :options="dict.type.asset_house_type" :value="assetInfo.assetHouseType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          资产面积
        </template>
        {{assetInfo.assetArea || 0}}㎡
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          账面原值
        </template>
        {{assetInfo.assetOriginalValue}}万元
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          建成年代
        </template>
        {{assetInfo.assetEstablishDate}}年
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          产权年限
        </template>
        <dict-tag :options="dict.type.age_limit" :value="assetInfo.assetOwnershipLength"/>
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          产权单位
        </template>
        <dict-tag :options="dict.type.property_unit" :value="assetInfo.assetPropertyUnit"/>
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          备注
        </template>
        {{assetInfo.assetRemark}}
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          图片
        </template>
        <div v-if="assetInfo.assetImg">
          <image-preview v-for="src in assetInfo.assetImg.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getContractInfo } from "@/api/business/contractInfo";
import { getAssetInfo } from "@/api/business/assetInfo";
export default {
  name: "contractInfo",
  dicts: ['contract_type', 'contract_status', 'pay_type', 'lease_status', 'asset_status', 'asset_house_type', 'property_unit', 'customer_lease_status', 'age_limit'],
  data() {
    return {
      contractInfo: {},
      assetInfo: {},
      id: null,
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;

  },
  mounted() {
    if(this.id) {
      this.getDetails()
    }
  },
  methods: {
    getDetails() {
      getContractInfo(this.id).then(r => {
        this.contractInfo = r.data
        getAssetInfo(this.contractInfo.contractAssetId).then(res => {
          this.assetInfo = res.data
        })
      })
   },
    /** 复跳转详情 */
    showInfo(assetId) {
      this.$router.push('/AssetLedger/asset-info/' + assetId)
    },
  },
}
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
}
.formC {
  width: 100%;
  padding: 0 50px;
  height: calc(100vh - 170px);
  overflow-y: auto;
}
::v-deep {
  .el-descriptions-item__label.is-bordered-label {
    width: 260px !important;
  }
}
</style>
